<template>
	<view class="flex-col page">
		<view class="title-bg flex-row-yc">
			<view @click="back" class="item-icon"><u-icon name="arrow-left" color="#fff"></u-icon></view>
			<view class="flex1 text">我的</view>
			<view @click="goSettingPage()" class="item-icon"><u-icon name="setting-fill" color="#fff"></u-icon></view>
		</view>

		<view class="people-info flex-row-yc" @click="goPersonalPage()">
			<image src="../../static/images/ic-photo.png"></image>
			<view class="flex-col flex1">
				<view>{{mineInfo.manname}}</view>
				<view style="margin-top: 5px;">{{mineInfo.mantel}}</view>
			</view>
			<view class="item-icon"><u-icon name="arrow-right" color="#76a2d3"></u-icon></view>
		</view>

		<view class="flex-row-yc attendance" @click="goAttendancePage()">
			<view class="item-icon"><u-icon name="clock" color="#76a2d3"></u-icon></view>
			<view class="flex1" style="margin-left: 10px;">出勤管理</view>
			<view class="item-icon"><u-icon name="arrow-right" color="#76a2d3"></u-icon></view>
		</view>

		<view class="flex-row-yc order-title">
			<view class="item-icon"><u-icon size="20px" name="order" color="#76a2d3"></u-icon></view>
			<view class="flex1" style="margin-left: 8px;">我的订单</view>
			<up-checkbox-group @change="checkboxChange">
				<up-checkbox v-model="checked" shape="circle" name="仅显示未完成订单" label="仅显示未完成订单"></up-checkbox>
			</up-checkbox-group>
		</view>

		<scroll-view class="list-box" :scroll-y="true" @scrolltolower="scrolltolower">
			<view class="context-box" v-for="item in list">
				<view class="title">
					<view class="title-right">{{item.departname}}</view>
					<view class="title-left" @click="locationCarAddress(item)">
						<view>定位车辆</view>
						<view><u-icon name="arrow-right" color="#9c9c9c"></u-icon></view>
					</view>
				</view>
				<view class="context">
					<view class="context-detail">
						<up-divider :hairline="true"></up-divider>
						<view class="flex-col" @click="goDetaill(item)">
							<view class="detail-item">
								<view class="item-icon"><u-icon name="order" color="#76a2d3"></u-icon></view>
								<view class="item-characters">{{item.carname}}</view>
							</view>
							<view class="detail-item">
								<view class="item-icon"><u-icon name="clock-fill" color="#76a2d3"></u-icon></view>
								<view class="item-characters">{{item.applydate}}</view>
							</view>
							<view class="detail-item">
								<view class="item-icon"><u-icon name="map" color="#76a2d3"></u-icon></view>
								<view class="item-characters">{{item.usebeginaddress}}</view>
							</view>
							<view class="detail-item-bottom">
								<view class="item-icon"><u-icon name="map" color="#f0b459"></u-icon></view>
								<view class="item-characters">{{item.useendaddress}}</view>
							</view>
						</view>
						<up-divider :hairline="true"></up-divider>
						<view class="button-group">
							<view class="button-group-item" v-if="getOrderStatus(item)==1">
								<view class="button-confim">
									<up-button type="primary" size="mini" text="接单"
										@click="orderReceiving(item.apid)"></up-button>
								</view>
							</view>
							<view class="button-group-item" v-if='getOrderStatus(item)==2'>
								<view class="button-add">
									<up-button type="primary" size="mini" text="增加途径点"
										@click="goPassPoint(item.apid)"></up-button>
								</view>
								<view class="button-confim">
									<up-button type="primary" size="mini" text="出车"
										@click="Driver_Out(item.apid)"></up-button>
								</view>
							</view>
							<view class="button-group-item" v-if='getOrderStatus(item)==3'>
								<view class="button-add">
									<up-button type="primary" size="mini" text="增加途径点"
										@click="goPassPoint(item.apid)"></up-button>
								</view>
								<view class="button-confim">
									<up-button type="primary" size="mini" text="回车" @click="goReceipt(id)"></up-button>
								</view>
							</view>
						</view>
					</view>
					<up-divider :hairline="true"></up-divider>
				</view>
			</view>
			<!-- 没有更多 -->
			<!-- <up-loadmore v-show="noMore" status="nomore" /> -->
		</scroll-view>

	</view>
</template>

<script>
	import {
		Driver_GetList
	} from '@/api/mine'
	export default {
		data() {
			return {
				list: [],
				mineInfo: {
					manname: "",
					mantel: ""
				},
				checked: false,
				noMore: false,
			}
		},

		created() {
			try {
				const value = uni.getStorageSync('mine_info');
				if (value) {
					this.mineInfo = JSON.parse(value);
				}
			} catch (e) {
				// error
			}

			this.getOrderList("5")
		},

		methods: {
			//获取派车单列表
			getOrderList(type) {
				let param = {
					type: type,
					PN: 1
				}
				Driver_GetList(param).then(res => {
					console.log("@@@@1", res)
					let {
						code,
						data
					} = res;
					if (code == 1) {
						this.list = data.table ?? []
					}
				})
			},
			checkboxChange(e) {
				if (e[0] === '仅显示未完成订单') {
					this.getOrderList("4")
				} else {
					this.getOrderList("5")
				}
			},
			//新派单接单
			orderReceiving(apid) {
				let param = {
					apid
				}
				Driver_Confirm(param).then(res => {
					console.log("接单：", res)
					this.currentPage = 0;
					getTruckingOrder();
				})
			},

			//新派单出车
			Driver_Out(apid) {
				let param = {
					LX: 0,
					apid: apid
				}
				Driver_OutRegistration(param).then(res => {
					console.log("出车：", res);
					this.currentPage = 0;
					getTruckingOrder();
				})
			},

			//上拉加载更多
			scrolltolower() {
				if (this.currentPage <= this.totalPage) {
					this.noMore = false
					if (this.tabIndex == 0) {
						this.getTruckingOrder()
					} else {
						this.getCarpoolOrder()
					}
				} else {
					this.noMore = true
				}
			},

			back() {
				uni.navigateBack({
					delta: 1
				});
			},

			//设置
			goSettingPage() {
				uni.navigateTo({
					url: '/pages/mine/setting'
				});
			},

			//个人中心
			goPersonalPage() {
				uni.navigateTo({
					url: '/pages/mine/personal'
				});
			},

			//出勤管理
			goAttendancePage() {
				uni.navigateTo({
					url: '/pages/attendance/attendance'
				});
			},


			getOrderStatus(item) {
				let applystatus = item.applystatus;
				let Driverconfirmflag = item.Driverconfirmflag;
				//接单
				if (applystatus == 3 && Driverconfirmflag == 0) {
					return 1;
				}
				//出车
				if (applystatus == 3 && Driverconfirmflag == 1) {
					return 2;
				}
				//回车
				if (applystatus == 4 && Driverconfirmflag == 1) {
					return 3;
				}
			},

			//跳转详情页
			goDetaill(item) {
				uni.navigateTo({
					url: '/pages/detail/index?apid=' + item.apid
				});
			},

			//跳转回执单页面
			goReceipt(id) {
				console.log(event, '来到回执单页面')
				event.stopPropagation();
				uni.navigateTo({
					url: '/pages/receipt/index'
				});
			},

			//跳转新增途经点
			goPassPoint(id) {
				console.log(event, '来到新增途经点', id)
				event.stopPropagation();
				uni.navigateTo({
					url: '/pages/point/index?apid=' + id
				});
				return false
			},

			//定位车辆
			locationCarAddress(item) {
				uni.navigateTo({
					url: '/pages/navigation/navigation-amap?cid=' + item.cid +
						'&usebeginaddress=' + item.usebeginaddress + '&useendaddress=' + item.useendaddress +
						'&usemanname=' + item.usemanname + '&usemantel=' + item.usemantel
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body,
	html,
	body,
	.page {
		width: 100%;
		height: 100%;
		background-color: white;
		overflow: hidden;
	}

	.title-bg {
		padding: 0 10px;
		height: 65px;
		background: linear-gradient(-90deg, #3C88D8 0%, #7CAFE7 100%);


		.text {
			color: #FFFFFF;
			font-size: 16px;
			font-weight: 600;
			margin-left: 10px;
		}
	}

	.people-info {
		padding: 0 10px;

		image {
			margin: 10px 10px 10px 0;
			width: 80px;
			height: 80px;
		}
	}

	.attendance {
		height: 45px;
		padding: 0 10px;
		border-bottom: aquamarine 1px solid;
		border-top: aquamarine 1px solid;
	}

	.order-title {
		padding: 0 10px;
		height: 45px;
		border-bottom: aquamarine 1px solid;

		image {
			width: 20px;
			height: 20px;
		}
	}


	.list-item {
		padding: 0 10px;
		border-top: aquamarine 1px solid;

		button {
			width: 80px;
			height: 30px;
			border-radius: 5px;
			border: none;
			color: white;
			font-size: 11px;
			margin: 0;
			background-color: #7CAFE7;
			margin-bottom: 5px;
		}

		.button-box {
			justify-content: end;
		}
	}

	.list-box {
		height: calc(100% - 260px);
		overflow-y: auto;
	}

	.context-box {
		width: 100%;
		// background-color: red;
		margin-top: 1.5px;

		// border-top: #3C88D8 solid 1px;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 30px;
			// border-bottom: 1px solid #e1e1e1;

			background-color: #ffffff;

			.title-right {
				font-size: 12px;
				color: #9c9c9c;
				margin-left: 15px;
			}

			.title-left {
				display: flex;
				align-items: center;
				font-size: 12px;
				color: #fab346;
				margin-right: 10px;

				.arrow {
					margin-left: 8px;
					font-size: 24px;
					color: #9c9c9c;
				}
			}
		}

		.context {
			display: flex;
			justify-content: center;
			// height: 80px;
			background-color: #ffffff;

			.context-detail {
				display: flex;
				flex-direction: column;
				width: calc(100% - 20px);

				.detail-item {
					display: flex;
					align-items: center;
					font-size: 14px;
					margin-top: 5px;

					.item-icon {
						margin-right: 5px;
					}
				}

				.detail-item-bottom {
					display: flex;
					align-items: center;
					font-size: 14px;
					margin-top: 5px;
					margin-bottom: 10px;

					.item-icon {
						margin-right: 5px;
					}
				}

				.button-group {
					position: relative;
					display: flex;
					margin-top: 5px;
					margin-bottom: 5px;
					height: 22px;

					.button-group-item {
						display: flex;

						position: absolute;
						right: 40px;

						.button-add {
							width: 30px;
							height: 20px;
							margin-right: 40px;
							margin-bottom: 2px;
						}

						.button-confim {
							width: 30px;
							height: 20px;

						}
					}

				}

				// height: 80px;
				// background-color: red;
				// border-top: #9c9c9c 0.1px solid;
			}
		}
	}
</style>